<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" th:text="${reportYear.name}"></h4>
</div>

<style>
    /*  #model_main{
          width: 1100px;
      }*/
    .modal-body {
        height: 1900px;
    }

    #mainy {
        float: left;
    }

    #data {
        margin-right: 50px;
        margin: 20px;
        width: 520px;
        float: right;
    }

    .clearfloat {
        clear: both;
    }

    #environmental {
        width: 950px;
        height: 150px;
        margin-bottom: 20px;
    }

    #evaluate {
        margin-top: 20px;
        width: 950px;
        height: 200px;
    }

    #field {
        width: 950px;

    }

    /*.fixed-table-container{
        right:90px;
        padding-bottom: 0px;
        width: 600px;
    }*/
</style>

<div class="modal-body">
    <!--这里通过所属的项目的id找到相对应的设备电量统计数据-->
    <input type="hidden" id="id" th:value="${reportYear.projectId}">
    <!--电量统计数据-->
    <div id="chartmainy" style="width:980px ; height: 300px"></div>
    <!--故障信息-->
    <div id="mainy" style="width: 400px;height:200px;"></div>
    <!--故障信息table请求-->
    <div id="data">
        <table id="dataTabley" data-url="/report/report_fault_information"
               data-page-list=[] data-striped="true" data-pagination="true"
               data-cache="false">
        </table>
    </div>
    <!--清除浮动-->
    <div class="clearfloat"></div>
    <!--收益表及环保贡献-->
    <div id="environmental">
        <fieldset style="margin-right: 10px; height: 150px; width: 950px; overflow-x: hidden">
            <legend><b>收益表及环保贡献</b></legend>
            <div class="col-sm-6" th:each="reports : ${reportLists}">
                <label class="col-sm-5" th:text="${reports.name}"></label>
                <span class="col-sm-5"
                      th:text="${reports.value==null?'暂无数据':#numbers.formatDecimal({reports.value}, 1, 2)}">
                            </span>
                <span class="col-sm-2" th:text="${reports.unit}"></span>
            </div>
        </fieldset>
    </div>

    <div id="field">
        <fieldset>
            <legend><b>诊断信息统计</b></legend>
            <!--电池组容量诊断结果,电池组DCIR诊断结果-->
            <div style="width: 900px;height: 200px">
                <div id="chartOne" style="height:200px; width:880px;"></div>

            </div>
            <div style="width: 900px;height: 200px">

                <div id="chartTwo" style="height:200px; width:880px;"></div>
            </div>
            <div style="width: 900px;height: 200px">
                <!--电池组循环次数,电池组电压不一致-->
                <div id="chartThree" style="height:200px; width:880px;"></div>
                <!-- <div id="chartFour" style="height:200px; width:440px;float: right"></div>-->
            </div>
        </fieldset>
    </div>
    <div id="">
        <fieldset style="width: 950px;margin-top: 20px">
            <legend><b>电池组不一致</b></legend>
            <table id="dataTablePackage" data-url="/report/report_package"
                   data-page-list=[] data-striped="true" data-pagination="true"
                   data-cache="false">
            </table>
        </fieldset>
    </div>
    <!--系统评价及日期的显示-->
    <div id="evaluate">
        <b style="font-size: 20px">储能系统评价</b>
        <textarea style="height:60px" class="form-control"></textarea>
        <div style="margin-top: 30px">
            <b style="font-size: 15px">生成日期:</b>
            <span th:text="${reportYear.createTime}"></span>
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            <b style="font-size: 15px">审核人:</b>
            <span></span>
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            <b style="font-size: 15px">复审人:</b>
            <span></span>
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            <b style="font-size: 15px">联系方式:</b>
            <span></span>
        </div>

    </div>

</div>

<script>
    $(function () {

        /*收益表及环保贡献 入库*/
        getTearnings();

        /*电池包不一致入库*/
        getpackageData();

        /*诊断信息*/
        diagnosticMessage();

        /*电量统计*/
        batteryLeft();

        /*故障信息*/
        faultInformation();


    });


    /******************************电量统计*********************************/

    function batteryLeft() {
        var myChart = echarts.init(document.getElementById('chartmainy'));

        //使用制定的配置项和数据显示图表
        myChart.setOption({
            title: {
                text: '电量统计数据'
            },
            tooltip: {},
            legend: {
                selectedMode: false
            },
            xAxis: {
                data: [],
                boundaryGap: false
            },
            yAxis: [
                {
                    splitLine: {
                        show: false
                    },
                    name: "充/放电量充(Mwh)"
                },
                {
                    splitLine: {
                        show: false
                    },
                    name: "电费(万元)"
                }
            ],
            series: [{
                name: '累计节省电费',
                type: 'line',
                color: 'green',
                yAxisIndex: 1,
                data: []
            }, {
                name: '累计充电量',
                type: 'bar',
                data: []
            }, {
                name: '累计放电量',
                type: 'bar',
                data: []
            }]
        });
        $.post("/report/chart_batteryLeft", {id: $("#id").val()}, function (map) {
            if (map.batteryLeftCdl != null && map.batteryLeftFdl != null && map.batteryLeftSdf != null) {

                myChart.setOption(
                    {
                        xAxis: {
                            data: Object.keys(map.batteryLeftSdf).sort()
                        }, series: [
                            {
                                name: "累计充电量",
                                data: Object.keys(map.batteryLeftCdl).sort().map(function (key) {
                                    return map.batteryLeftCdl[key].toFixed(2);
                                })
                            },
                            {
                                name: "累计放电量",
                                data: Object.keys(map.batteryLeftFdl).sort().map(function (key) {
                                    return map.batteryLeftFdl[key].toFixed(2);
                                })
                            },
                            {
                                name: "累计节省电费",
                                data: Object.keys(map.batteryLeftSdf).sort().map(function (key) {
                                    return map.batteryLeftSdf[key].toFixed(2);
                                })
                            }
                        ]

                    }
                );
            }

        })
    }

    /****************************************故障信息*****************************************/
    // 故障信息图表。
    function faultInformation() {
        var pie = echarts.init(document.getElementById('mainy'));
        pie.setOption({
            title: {
                text: '故障信息'
            }, tooltip: {
                trigger: 'item',
                /*formatter: "{a} <br/>{b} : {c} ({d}%)"*/
                formatter: '{b} :{c}({d}%)'
            },
            series: {
                type: 'pie',
                data: []
            }
        });
        $.post("/report/chart_faultInformation", {id: $("#id").val()}, function (map) {
                if (map != null) {
                    pie.setOption({
                        series: {
                            data: map
                        }
                    });
                }
            }
        );
    }


    /*********************************诊断信息*******************************/
    function diagnosticMessage() {
        /*这里是 电池组容量诊断结果    (图一)*/
        var charOnes = echarts.init(document.getElementById("chartOne"));
        charOnes.setOption({
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        show: true
                    }
                }
            },
            tooltip: {trigger: "item"},
            legend: {
                selectedMode: false
            },
            xAxis: {
                data: [],
                boundaryGap: false
            },
            yAxis: {},
            series: [{
                name: '电池组容量诊断结果',
                type: 'line',
                data: []
            }]
        });
        $.post("/report/chart_Ones", {id: $("#id").val()}, function (map) {

            if (map.dignosticOne != null) {
                console.log(map)
                charOnes.setOption(
                    {
                        xAxis: {
                            data: Object.keys(map.dignosticOne).sort()
                        }, series:
                            {
                                name: "电池组容量诊断结果",
                                data: Object.keys(map.dignosticOne).sort().map(function (key) {
                                    return map.dignosticOne[key].toFixed(2);
                                })
                            }

                    }
                )
            }
        });
    }

    /******************************end*********************************/

    /*电池组DCIR诊断结果 (图二)*/
    var chartTwos = echarts.init(document.getElementById("chartTwo"));
    chartTwos.setOption({
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    show: true
                }
            }
        },
        tooltip: {trigger: "item"},
        legend: {selectedMode: false},
        xAxis: {
            data: [],
            boundaryGap: false
        },
        yAxis: {},
        series: [{
            name: '电池组DCIR诊断结果',
            type: 'line',
            data: []
        }]
    });
    $.post("/report/chart_Twos", {id: $("#id").val()}, function (map) {
        if (map.dignosticTwo != null) {
            console.log(map)
            chartTwos.setOption(
                {
                    xAxis: {
                        data: Object.keys(map.dignosticTwo).sort()
                    }, series:
                        {
                            name: "电池组DCIR诊断结果",
                            data: Object.keys(map.dignosticTwo).sort().map(function (key) {
                                return map.dignosticTwo[key].toFixed(2);
                            })
                        }

                }
            )
        }
    });


    /****************************end**************************/
    /*诊断结果图三    电池组循环次数*/
    var chartThrees = echarts.init(document.getElementById("chartThree"));
    chartThrees.setOption({
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    show: true
                }
            }
        },
        tooltip: {trigger: "item"},
        legend: {
            selectedMode: false
        },
        xAxis: {
            data: [],
            boundaryGap: false
        },
        yAxis: {},
        series: [{
            name: '电池组循环次数',
            type: 'line',
            data: []
        }]
    });
    $.post("/report/chart_Thress", {id: $("#id").val()}, function (map) {
        if (map.dignosticThress != null) {
            console.log(map)
            chartThrees.setOption(
                {
                    xAxis: {
                        data: Object.keys(map.dignosticThress).sort()
                    }, series:
                        {
                            name: "电池组循环次数",
                            data: Object.keys(map.dignosticThress).sort().map(function (key) {
                                return map.dignosticThress[key].toFixed(2);
                            })
                        }

                }
            )
        }

    });
    /*收益表及环保贡献 入库*/
    function getTearnings(){
        $.post("/report/tearnings_data", {id: $("#id").val()}, function (data) {
            if (data) {
                return "sss";
            }
        });
    }

    /*电池包不一致*/
    function getpackageData() {
        $.post("/report/package_data", {id: $("#id").val()}, function (data) {
            if (data) {
                return "sss";
            }
        });
    }

    /********************************诊断表格************************************/
    var dataFormatpackage = [{
        field: 'monthAndName',
        align: 'center',
        title: '名称/月份'
    }, {
        field: 'monthJan',
        align: 'center',
        title: '一月'
    }, {
        field: 'monthFeb',
        align: 'center',
        title: '二月',
    }, {
        field: 'monthMar',
        align: 'center',
        title: '三月'
    }, {
        field: 'monthApr',
        align: 'center',
        title: '四月'
    }, {
        field: 'monthMay',
        align: 'center',
        title: '五月'
    }, {
        field: 'monthJun',
        align: 'center',
        title: '六月',
    }, {
        field: 'monthJul',
        align: 'center',
        title: '七月'
    }, {
        field: 'monthAug',
        align: 'center',
        title: '八月'
    }, {
        field: 'monthSep',
        align: 'center',
        title: '九月'
    }, {
        field: 'monthOct',
        align: 'center',
        title: '十月',
    }, {
        field: 'monthNov',
        align: 'center',
        title: '十一月'
    }, {
        field: 'monthDec',
        align: 'center',
        title: '十二月'
    }];


    /***********************************故障信息*************************************/


        //table字段
    var dataFormat = [{
            field: 'alarmLev',
            align: 'center',
            title: '报警等级'
        }, {
            field: 'alarmNum',
            align: 'center',
            title: '出现次数'
        }, {
            field: 'proportion',
            align: 'center',
            title: '比例',
        }, {
            field: 'alarmMaximumEquipment',
            align: 'center',
            title: '报警最多设备'
        }, {
            field: 'alarmMaximumSource',
            align: 'center',
            title: '报警最多类容'
        }];


    getTable(dataFormat, "dataTabley");

    getPackageDataTable(dataFormatpackage, "dataTablePackage");


    function getTable(dataFormat, id) {

        $("#" + id).bootstrapTable({
            method: "get",
            sidePagination: "server",
            dataType: "json",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pageNum: params.offset / params.limit
                };
                return param;
            },
            columns: dataFormat
        });
    }

    function getPackageDataTable(dataFormatP, id) {
        $("#" + id).bootstrapTable({
            method: "get",
            sidePagination: "server",
            dataType: "json",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pageNum: params.offset / params.limit
                };
                return param;
            },
            columns: dataFormatP
        });
    }

</script>